/* pages/homeDetails/homeDetails.wxss */
@import "../../app.less";

.homeDetailsBox {
  .returnPage {
    position: fixed;
    z-index: 1000;
    background-color: rgba(150, 143, 143, 0.678);
    text-align: center;
    color: #fff;
    border-radius: 50%;
  }

  .swiper {
    width: 100%;
    height: 1000rpx;
  }

  .swiperBox {
    width: 100%;
    height: 100%;
  }

  .swiperItem {
    height: 100%;
  }

  .blogInfoMessage {
    color: #fff;
    font-size: 24rpx;
    background-color: @c_1A1A1A;
    padding: 20rpx;

    &.mt-2 {
      margin-top: 20rpx;
    }
  }

  .blogInfoMessage .content {
    margin-top: 20rpx;
  }

  .blogInfoMessage .lz {
    font-weight: 900;
    background-image: linear-gradient(to right, @c_FE8F4E, @c_EC54CE);
    -webkit-background-clip: text;
    color: transparent;
  }

  .blogInfoMessage .labelBox {
    margin-top: 30rpx;
  }

  .blogInfoMessage .labelBox .label {
    background-color: @c_4050B5;
    display: inline-block;
    border-radius: 20px;
    padding: 4rpx 20rpx;
    font-size: 22rpx;
    margin-bottom: 10rpx;
    margin-right: 10rpx;
  }

  .blogInfoMessage .userInfo {
    position: relative;
  }

  .blogInfoMessage .userInfo .box {
    display: inline-block;
    vertical-align: middle;
    position: relative;

    &:nth-last-child(2) {
      margin-left: 20rpx;
    }
  }

  .blogInfoMessage .blogInfo {
    margin-top: 40rpx;
    display: flex;
    justify-content: space-around;
    text-align: center;
  }

  .blogInfoMessage .blogInfo .iconfont {
    font-size: 50rpx;
    transition: all .5s;

    &.like {
      &.active {
        color: #f40;
      }
    }

    &.star {
      &.active {
        color: rgb(230, 193, 32);
      }
    }

    &.comment {
      &.active {
        color: rgb(0, 217, 255);
      }
    }
  }

  .blogInfoMessage .blogInfo .number {
    margin-top: 10rpx;
  }

  .sameBox {
    color: #fff;
    font-size: 24rpx;
    background-color: @c_1A1A1A;
    padding: 20rpx;
    margin-top: 20rpx;
    display: flex;
    flex-wrap: wrap;
  }

  .sameBox .btn {
    margin-left: 20rpx;
    margin-top: 20rpx;
    padding: 10rpx 20rpx;
    background-color: aqua;
    border-radius: 20px;
    overflow: hidden;
  }

  .messageUploadBox .textarea {
    background-color: @c_1e1e27;
    box-sizing: border-box;
    padding: 20rpx;
    width: 100%;
    // border: 1px solid #ccc;
    border-radius: 10px;
  }

  .messageUploadBox .upload {
    width: 150rpx;
    margin-top: 10rpx;
    background-color: @c_4050B5;
    color: @c_fff;
    font-size: 24rpx;
  }

  .messageUploadBox .btnBox {
    width: 320rpx;
    display: flex;
  }

  .messageUploadBox .reset {
    background-color: #ccc;
    color: #000;
    margin-right: 20rpx;
  }

  .messageUploadBox .zhBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .blogInfoMessage .messageBox {
    margin-top: 30rpx;
  }

  .blogInfoMessage .headerBox {
    display: flex;
    align-items: center;
    position: relative;
  }

  .blogInfoMessage .headerBox .time {
    position: absolute;
    right: 10rpx;
    top: 50%;
    transform: translateY(-50%);
    color: rgb(151, 151, 151);
  }

  .blogInfoMessage .contentBox {
    margin-top: 20rpx;
    box-sizing: border-box;
    padding-left: 100rpx;
  }
}